TallerAvanzado.png
Volver al menú

___Insertar un botón Imprimir Página


Si añadimos ?f=print al final de la URL de una página, en la barra de dirección del navegador, podemos ver esa página en formato de impresión, eliminando el menú, las pestañas, el logo, etc. y quedando sólo la información de la página. Por ejemplo:
http://tallerdewiki.wikispaces.com/home?f=print

Algo parecido ocurre, si en lugar de print le añades or ?f=plain. La diferencia con el anterior es que aquí no se muestra el nombre de la página.
http://tallerdewiki.wikispaces.com/home?f=plain

En realidad, ésta es la misma dirección que aparece si pulsamos en la pestaña PÁGINA > Print. Por tanto, si desplegamos el menú de las propiedades de página y copiamos el enlace de Print (haciendo clic derecho > Copiar la ruta del enlace), tenemos la misma URL. Lo que pasa es que, para los niños puede quedar un poco oculta o confusa esta acción. Para ellos es más sencillo hacer clic directamente en un icono en forma de impresora.

Este enlace lo podemos poner en un texto o en una imagen (como icono).
Imprimir - impresora.gif

Todo va bien cuando tecleamos ?f=print en la barra del navegador. Y todo parece ir bien cuando insertamos este enlace en un texto o en una imagen. Sin embargo, puede surgir el problema, ya que a veces el navegador sustituye los signos ? (interrogación) y = (igual) por otros caracteres.
En lugar del enlace anterior, muestra: http://tallerdewiki.wikispaces.com/Insertar+un+bot%C3%B3n+Imprimir+P%C3%A1gina%3Ff%3Dprint

PROBAR ESTO:
[[http://{$servername}/{$pagename|url}?f=print|Imprimir]]

Entonces, aunque la url es correcta, al hacer clic en el enlace puede que nos salga un mensaje de error o un aviso de que no existe la página a la que queremos acceder.

Para evitar esto, disponemos de un código en javascript.
Así, hacemos clic en el punto de nuestra página donde queremos que aparezca el icono de la impresora. En la barra de edición, hacemos clic en el icono Incrustar widget > Otro HTML. Allí, pegamos el siguiente código:
<script language="javascript">
if(String(window.location).indexOf("f=print")==-1){
document.write("<div style='float:right;margin:0 0 .5em .5em'>"+
"<a href='"+window.location+"?f=print'>"+
"<img border='0' "+
"src='**http://shadowsoverphoenix.wikispaces.com/space/showimage/print_icon.gif**'"+
" width='30px' height='30px'></a></div>");}
</script>
Al guardar la página quedará lo siguiente:








Si pulsamos en esta impresora:
  1. Mostrará la página en formato de impresión (con el f=print que dijimos antes).
  2. Si tenemos una impresora conectada y encendida, se imprimirá la página.

Si nos damos cuenta, en el código se muestra la URL del icono de la imagen y el tamaño con que se mostrará:

``<img border='0' "+
"src='http://shadowsoverphoenix.wikispaces.com/space/showimage/print_icon.gif'"+
" width='30px' height='30px'></a></div>");}
</script>``

Esto lo podemos modificar. Podemos cambiar el tamaño, o podemos cambiar la imagen del icono por cualquier otro que queramos.
  • Para cambiar el borde de la imagen, sustituimos el cero (0) por otro número, que indica su grosor. Hay que tener cuidado de no borrar las comillas simples, justo antes y después del número.
  • Para cambiar las medidas, tecleamos los números teniendo cuidado de no borrar ninguna comilla.
  • Para cambiar la imagen, simplemente, tendremos que sustituirla con la nueva URL. Si queremos usar un icono que hemos subido a la wiki, vamos a Administrar wiki > Archivos, buscamos el archivo que hemos subido (con una impresora o similar) y, haciendo clic derecho sobre este archivo, tomamos la ruta del enlace. Luego, editamos la página y abrimos el script (haciendo doble clic en el cuadro gris que lo contiene), y sustituimos la url del icono por la ruta del enlace de nuestro archivo.




TAREA:

1. Inserta un icono de impresora en una página, y añádele la url de la página, añadiéndole f=print. Haz lo mismo, esta vez sin imagen, escribiendo la palabra "Imprimir" y añadiéndole el mismo enlace.
2. En otra página, inserta el script de impresión que se muestra en la explicación.
3. Prueba a modificar la imagen del icono, usando ésta: http://tallerdewiki.wikispaces.com/file/view/impresora.gif.



Volver al menú
Contributions to https://tallerdewiki.wikispaces.com/ are licensed under a Creative Commons Attribution Share-Alike Non-Commercial 3.0 License. Creative Commons Attribution Share-Alike Non-Commercial 3.0 License
Portions not contributed by visitors are Copyright 2018 Tangient LLC
TES: The largest network of teachers in the world